import React, { Component } from "react";
import { Input } from "antd";
import "./index.scss";
import { Tabs } from "antd";
import axios from "axios";
import api from "../../../api";

export default class Search extends Component {
  constructor() {
    super();
    this.state = {
      isShow: false,
      list: [],
    };
  }
  onChange = (e) => {
    if (e.target.value == "") {
      this.setState({
        isShow: false,
        list: [],
      });
      return;
    }
    api.getSearch({ keyword: e.target.value }).then((res) => {
      console.log(res,25);
      
    });
    // axios
    //   .get(
    //     `/api/qcross/place/public.php?action=placesearch&keyword=${e.target.value}&client=web`
    //   )
    //   .then((res) => {
    //     if (res.data.data.list.length > 0) {
    //       this.setState({
    //         isShow: true,
    //         list: res.data.data.list,
    //       });
    //     } else {
    //       this.setState({
    //         isShow: false,
    //         list: [],
    //       });
    //     }
    //   });
  };
  render() {
    return (
      <>
        <div className="q-home-search">
          <Tabs defaultActiveKey="1" type="card">
            <Tabs.TabPane tab="看攻略" key="1">
              <Input placeholder="看攻略的内容" onChange={this.onChange} />
              {/* 搜索的内容 */}
              {this.state.isShow ? (
                <ul className="search-list">
                  {this.state.list.map((item) => {
                    return <li key={item.id}>{item.name}</li>;
                  })}
                </ul>
              ) : null}
            </Tabs.TabPane>
            <Tabs.TabPane tab="特价酒店" key="3">
              <Input placeholder="特价酒店的内容" />
              {/* 搜索的内容 */}
              <div></div>
            </Tabs.TabPane>
          </Tabs>
        </div>
      </>
    );
  }
}
